<template>
  <div class="com_echarts" id="right_bottom_first">
  </div>
</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'right_bottom_first',
  data () {
    return {
        id:"right_bottom_first"
    }
  },
  created () {

  },
  mounted(){
      this.initMap();
  },
  methods:{
    initMap(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));
    
        var option = {
            calculable: true,
            tooltip: {
                "trigger": "item",
                "formatter": "{a}<br/>{b}:{c}万人"
            },
            title: {
                text: "医院出院人数病人前十类疾病构成",
                left: "center",
                top: '2%',
                textStyle: {
                    "color": "#ccc",
                    fontSize:14
                }
            },
            legend: {
                "icon": "circle",
                "x": "75%",
                right:0,
                "data": [
                    "传染疾病",
                    "肿瘤",
                    "血液",
                    "内分泌",
                    "精神和行为",
                    "神经系统",
                    "循环系统",
                    "呼吸系统",
                    "其他疾病"
                ],
                "textStyle": {
                    "color": "#fff",
                    fontSize:12
                }
            },
            series: [{
                "name": "疾病构成",
                "type": "pie",
                "radius": [
                    20,
                    80
                ],
                "avoidLabelOverlap": false,
                "startAngle": 0,
                "center": [
                    "40%",
                    "30%"
                ],
                "roseType": "area",
                "selectedMode": "single",
                "label": {
                    "normal": {
                        "show": true,
                        "formatter": "{c}万人"
                    },
                    "emphasis": {
                        "show": true
                    }
                },
                "labelLine": {
                    "normal": {
                        "show": true,
                        "smooth": false,
                        "length": 7,
                        "length2": 5
                    },
                    "emphasis": {
                        "show": true
                    }
                },
                "data": [{
                        "value": 600.58,
                        "name": "传染疾病",
                        "itemStyle": {
                            "normal": {
                                "color": "#f845f1"
                            }
                        }
                    },
                    {
                        "value": 1100.58,
                        "name": "肿瘤",
                        "itemStyle": {
                            "normal": {
                                "color": "#ad46f3"
                            }
                        }
                    },
                    {
                        "value": 1200.58,
                        "name": "血液",
                        "itemStyle": {
                            "normal": {
                                "color": "#5045f6"
                            }
                        }
                    },
                    {
                        "value": 1300.58,
                        "name": "内分泌",
                        "itemStyle": {
                            "normal": {
                                "color": "#4777f5"
                            }
                        }
                    },
                    {
                        "value": 1400.58,
                        "name": "精神和行为",
                        "itemStyle": {
                            "normal": {
                                "color": "#44aff0"
                            }
                        }
                    },
                    {
                        "value": 1500.58,
                        "name": "神经系统",
                        "itemStyle": {
                            "normal": {
                                "color": "#45dbf7"
                            }
                        }
                    },
                    {
                        "value": 1500.58,
                        "name": "循环系统",
                        "itemStyle": {
                            "normal": {
                                "color": "#f6d54a"
                            }
                        }
                    },
                    {
                        "value": 1600.58,
                        "name": "呼吸系统",
                        "itemStyle": {
                            "normal": {
                                "color": "#f69846"
                            }
                        }
                    },
                    {
                        "value": 1800,
                        "name": "其他疾病",
                        "itemStyle": {
                            "normal": {
                                "color": "#ff4343"
                            }
                        }
                    },
                     {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                     {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                     {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                     {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                     {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                     {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                     {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                     {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    {
                        value: 0,
                        name: "",
                        label:{
                            show:false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                ]
            }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    randomData() {
        return Math.round(Math.random()*1000);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
</style>
